<template>
  <div :style="'width:100%;height:calc(' + iframeHeight + 'px - 80px)'">
    <div>
      <img @click="goBack" src="@/assets/icons/goback.svg" alt class="goBtn" />
      <!-- <CButton class="goBtn1">创建</CButton> -->
    </div>

    <iframe :src="getUrl()"></iframe>
    <CreateTask
      :modalShow="productLineInfo.modalShow"
      :productLineInfo="productLineInfo"
      @close="taskModalClose"
    >
    </CreateTask>
  </div>
</template>

<script>
import CreateTask from "../jobProcess/createTask.vue";
export default {
  name: "createWorkflow",
  data() {
    return {
      iframeHeight: 0,
      productLineInfo: {
        modalShow: false,
        id: 0,
        workflowName: "",
        type: "image", //参量和普通数据类型区别 image:普通处理加工和质检流程  parameter：参量流程
        taskType: 2, //处理加工
        groupId: 0,
        marker: "",
        description: "",
      },
    };
  },
  components: {
    CreateTask,
  },
  created() {
    this.groupId = this.$route.params.id; //添加流程线的id
  },
  mounted() {
    this.iframeHeight = window.document.body.offsetHeight;
    const _this = this;
    window.addEventListener(
      "resize",
      function () {
        _this.iframeHeight = window.document.body.offsetHeight;
      },
      false
    );


    this.productLineInfo.taskType = this.$route.query.taskType;
    this.productLineInfo.type = this.$route.query.type?this.$route.query.type:"image";
    window["createTask"] = (type, data) => {
      _this.createTask(data);
    };
  },
  methods: {
    createTask(data) {
      if (data.id == 0) {
        this.$Message.warning("未保存，请先保存！");
        return;
      }
      this.productLineInfo.modalShow = true;
      this.productLineInfo.id = data.id;
      this.productLineInfo.workflowName = data.name;
      this.productLineInfo.description = data.description;
      // this.productLineInfo.groupId = this.groupId;

      let marker = data.marker;
      let type = "ProducType-产品类型";
      if (JSON.stringify(type) != "{}" && marker[type])
        marker = marker[type][0];

      this.productLineInfo.marker = marker;
    },

    taskModalClose() {
      this.productLineInfo.modalShow = false;
    },

    getUrl() {
      let userIdFromLocalStorage = "0";
      try {
        let user = JSON.parse(window.sessionStorage.getItem("vuex")).user;
        if (user != null) {
          userIdFromLocalStorage = user.userId;
        }
      } catch (e) {
        console.error("User information get failed");
      }

      return `workflow/index.html?mode=create&groupId=${this.groupId}&userId=${userIdFromLocalStorage}`;
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
iframe {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #c7c7c7;
}

.goBtn {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 20px;
  height: 19px;
  -webkit-filter: invert(1);
  filter: invert(1);
  cursor: pointer;
}
</style>
